<template>
    <div class="dorm-list">
        <cjc-nav title="寝室列表" @customRouter="$router.push({ name: 'comfirm_infomation' })">
            <div class="refresh-area"  @click="refresh">
                <Icon class="refresh-area-icon" :class="transform" type="ios-loop-strong"></Icon>
            </div>
        </cjc-nav>
        <div class="dorm-container">
            <dl-tips></dl-tips>
            <dl-list>
                <dl-list-item v-for="(item, index) in $store.state.DormitoryList" :info="item" :key="index" @trigger="goChooseBed(index)"></dl-list-item>
            </dl-list>
        </div>
    </div>
</template>

<script>
export default {
    components: {
        DlTips: () => import('@/components/DlTips.vue'),
        DlList: () => import('@/components/DlList.vue'),
        DlListItem: () => import('@/components/DlListItem.vue')
    },
    data() {
        return {
            page: 1,
            transform: ''
        }
    },
    created() {
        this.setDormitoryList(this.page)
    },
    methods: {
        // 前往床位选择页面
        goChooseBed(index) {
            this.$router.push({
                name: 'beds_choose',
                params: {dormIndex: index}
            })
        },
        // 设置寝室列表
        async setDormitoryList(page) {
            let DormitoryLis = await this.$store.dispatch('setDormitoryList', {
                ksh: this.$store.state.userInfo.KSH,
                pageSize: 20,
                page
            })
            return DormitoryLis
        },
        // 刷新列表
        async refresh() {
            this.transform = 'transform'
            this.page += 1
            let DormitoryLis = await this.setDormitoryList(this.page)
            this.transform = ''
            if (DormitoryLis.data.result.length === 0) {
                this.setDormitoryList(1)
            }
        }
    }
}
</script>

<style lang="less">
@import '../style/variable.less';
.dorm-list {
    min-height: calc(~"100vh - 50px");
    background-color: #fff;
    .refresh-area {
        padding-right: 10px;
        .refresh-area-icon {
            font-size: 24px;
            color: @primary-color;
        }
    }
    .dorm-container {
    }
    .transform {
        animation: rotageInfa 1s linear infinite;
    }
    @keyframes rotageInfa {
        form { transform: rotate(0deg) }
        to { transform: rotate(360deg) }
    }
}
</style>
